<template>
	<view class="pageBox">
		<view class="topBox" :style="{paddingTop :statusBarHeight + 25 + 'px'}">
			<view class="topHead flex-between">
				<uni-icons type="back" color="#ffffff" size="24" @click="goBack"></uni-icons>
				<view class="title">
					商品详情
				</view>
				<image @click="onKeFu" class="right" src="http://www.bobei.shop/static/third/orderNotice.png" mode="">
				</image>
			</view>

			<view class="statusBox">
				<view class="status" v-if="info.status == -1">
					交易关闭
				</view>

				<view class="status" v-if="info.status == 0">
					待付款
				</view>
				<view class="status2" v-if="info.status == 0">
					您的订单未支付成功，您是有什么疑问吗？（如有疑问请联系客服）。
				</view>

				<view class="status" v-if="info.status == 1">
					待发货
				</view>
				<view class="status2" v-if="info.status == 1">
					您的订单已支付成功，正在积极为您备货，准备发出（如有疑问请联系客服）。
				</view>

				<view class="status" v-if="info.status == 2">
					待收货
				</view>
				<view class="status2" v-if="info.status == 2">
					您的订单已发货暂未被签收，请您时刻关注物流动向（如有疑问
					请联系客服）。
				</view>

				<view class="status" v-if="info.status == 3">
					待评论
				</view>
				<view class="status" v-if="info.status == 4">
					退款中
				</view>

				<view class="status" v-if="info.status == 5">
					退款完成
				</view>
				<view class="status2" v-if="info.status == 5">
					已退回原支付账户，您是有什么疑问吗？（如有疑问请联系客服）。
				</view>

				<view class="status" v-if="info.status == 6">
					已完成
				</view>

				<view class="status" v-if="info.status == 7">
					拼团中
				</view>
				<view class="status" v-if="info.status == 8">
					拼团失败
				</view>
			</view>

			<view class="addressBox">
				<view class="addStatus flex-row">
					<view class="addSta" v-if="info.status == -1">
						交易关闭
					</view>
					<view class="addSta" v-if="info.status == 0">
						待付款
					</view>
					<view class="addSta" v-if="info.status == 1">
						待发货
					</view>
					<view class="addSta" v-if="info.status == 2">
						待收货
					</view>
					<view class="addSta" v-if="info.status == 3">
						待评论
					</view>
					<view class="addSta" v-if="info.status == 4">
						退款中
					</view>
					<view class="addSta" v-if="info.status == 5">
						退款完成
					</view>
					<view class="addSta" v-if="info.status == 6">
						已完成
					</view>

					<view class="addSta" v-if="info.status == 7">
						拼团中
					</view>
					<view class="addSta" v-if="info.status == 8">
						拼团失败
					</view>
					<view class="addTime">
						{{info.createdAt}}
					</view>
				</view>

				<view class="address" v-if="info.addressId">
					<view class="addressTop flex-row">
						<view class="addressTopItem">
							{{info.addressId.name}}
						</view>
						<view class="addressTopItem">
							{{String(info.addressId.mobile).substring(0,3)}}****{{String(info.addressId.mobile).substr(info.addressId.mobile.length - 4)}}
						</view>
					</view>
					<view class="addressBom">
						{{info.addressId.address}}
					</view>
				</view>
			</view>
		</view>

		<view class="infoBox">
			<view class="info" v-for="(item,index) in info.orderGoods" :key="index">
				<view class="infoTop flex" @click.stop="goGoodsDetails(item.goodsId)">
					<image class="thumb" :src="item.thumb" mode=""></image>
					<view class="infoTopR">
						<view class="goodsTitle oneHidden">
							{{item.title}}
						</view>
						<view class="skuBox flex-between">
							<view class="sku flex-row">
								<view class="skuText" v-if="item.specTitle">
									{{ item.specTitle }}
								</view>
								<view class="amount flex-row">
									<view class="amountText">
										数量
									</view>
									<view class="amountText2">
										X
									</view>
									<view class="amountText">
										{{item.num}}
									</view>
								</view>
							</view>
							<view class="price">
								¥{{item.price}}
							</view>
						</view>
					</view>
				</view>
				<view class="btnBox flex-row"
					v-if="(info.status == 1 || info.status == 2) && (info.type == 2 || info.type == 4)">
					<button class="afterBtn" :plain="true" @click.stop="onAfterSale(item)">申请售后</button>
				</view>
			</view>
			<view class="finalPrice flex-row">
				<view class="finalPriceText">
					实付款：
				</view>
				<view class="finalPriceText2">
					¥{{ info.finalPrice }}
				</view>
			</view>
		</view>

		<view class="orderInfoBox">
			<view class="orderInfoBoxTitle">
				订单信息
			</view>
			<view class="orderInfo flex-between">
				<view class="orderInfoL">
					交易单号
				</view>
				<view class="orderInfoR">
					{{info.orderNo}}
				</view>
			</view>

			<view class="orderInfo flex-between">
				<view class="orderInfoL">
					下单时间
				</view>
				<view class="orderInfoR">
					{{info.createdAt}}
				</view>
			</view>


			<view class="orderInfo flex-between">
				<view class="orderInfoL">
					购买数量
				</view>
				<view class="orderInfoR">
					{{info.num}}件
				</view>
			</view>
		</view>



		<view class="bom flex-row">
			<button class="btn" :plain="true" v-if="info.status == 0" @click.stop="closeOrder(info.id)">取消订单</button>
			<button class="btn2" :plain="true" v-if="info.status == 0" @click.stop="pay(info.orderNo)">立即支付</button>


			<button class="btn" :plain="true" v-if="info.status == 2" @click.stop="goLogistics">查看物流</button>
			<button class="btn2" :plain="true" v-if="info.status == 2" @click.stop='theGoods(info.id)'>确认收货</button>
			<button class="btn2" :plain="true" v-if="info.status == 3 && info.iscomment == 0"
				@click.stop='goEval(info.id)'>去评价</button>

			<button class="btn" :plain="true" v-if="info.status == 6" @click.stop="deleteOrder(info.id)">删除订单</button>
			<button class="btn2" :plain="true" v-if="info.status == 6" @click.stop="buyAgain(info.goodsId)">再次购买</button>
		</view>

		<my-popup-tips type="bottom" :showTips="paywayShow" @tipsOpen="paywayOpen" @tipsClose="paywayClose">
			<template #default>
				<view class="paywayBox">
					<image class="close" src="http://www.bobei.shop/static/my/payway/close.png" @click="paywayShow = false">
					</image>
					<view class="paywayTitle">
						选择支付方式
					</view>

					<view class="way">
						<view class="wayItem flex-between" v-for="item in actions" :key="item.id" @click="onWayItem(item)">
							<view class="wayItemLeft flex-row">
								<image class="wayItemLeftImg" :src="item.image"></image>
								<view class="wayItemLeftCon">
									<view class="wayItemLeftConText">
										{{ item.name }}
									</view>
									<!-- 	<view class="wayItemLeftConCard">
									123456789
								</view> -->
								</view>
							</view>
							<view class="wayItemRight">
								<image class="choose" src="http://www.bobei.shop/static/login/choose.png" v-if="!item.status">
								</image>
								<image class="choose" src="http://www.bobei.shop/static/login/choosed.png" v-if="item.status">
								</image>
							</view>
						</view>

						<view class="wayItem flex-between" @click="goMyBankCard('/pages/my/bank/myBankCard')">
							<view class="wayItemLeft flex-row">
								<image class="wayItemLeftImg" src="http://www.bobei.shop/static/my/payway/yinHang.png">
								</image>
								<view class="wayItemLeftCon">
									<view class="wayItemLeftConText">
										添加银行卡
									</view>
								</view>
							</view>
							<view class="wayItemRight">
								<view class="add flex-row">
									<view class="addText">
										去添加
									</view>
									<image class="arrowRight" src="http://www.bobei.shop/static/home/arrowRight.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>

					<button class="paySure" :plain="true" @click="onPaySure">确认付款</button>
				</view>
			</template>
		</my-popup-tips>

		<!-- 密码框 -->
		<my-popup-tips :showTips="passShow" :mask="true" @tipsOpen="passTipsOpen" @tipsClose="passTipsClose">
			<view class="passTipsBox">
				<view class="tipsTitle flex-center">
					提示
				</view>

				<view class="tipsText flex-center">
					<input type="password" class="safeword" v-model="safeword" placeholder="请输入支付密码">
				</view>

				<view class="tipsBtnBox flex-between">
					<button class="tipsCloseBtn" :plain="true" @click="onPassTipsCloseBtn">取消</button>
					<button class="tipsSureBtn" :plain="true" :disabled="oneClick" @click="onPassTipsSureBtn">确定</button>
				</view>
			</view>
		</my-popup-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: "",
				keFu: "",
				tabId: "",
				id: '',
				info: {
					"orderNo": "",
					"addressId": {
						"name": "",
						"mobile": "",
						"address": ""
					},
					"status": 0,
					"num": 1,
					"orderGoods": [{
						"id": 3779,
						"shopId": 0,
						"orderId": 3705,
						"goodsId": 42427,
						"price": "0.00",
						"status": 0,
						"refundId": 0,
						"refundNum": 0,
						"refundMoney": "0.00",
						"deletedAt": null,
						"createdAt": "2022-11-18 11:16:54",
						"updatedAt": "2022-11-18 11:16:54",
						"specs": "",
						"specTitle": "",
						"credits": 0,
						"num": 1,
						"title": "",
						"thumb": "",
						"genre": 0,
						"marketprice": "0.00",
						"score": 0,
						"commentType": 0,
						"refund": null
					}]
				},
				orederNo: "",
				paywayShow: false,
				bankIcon: {
					CIB: "http://www.bobei.shop/static/my/payway/CIB.png", // 兴业银行
					ECITIC: "http://www.bobei.shop/static/my/payway/ECITIC.png", // 中信银行
					PINGANBANK: "http://www.bobei.shop/static/my/payway/PINGANBANK.png", // 平安银行
					SHB: "http://www.bobei.shop/static/my/payway/SHB.png", // 上海银行
					ABC: "http://www.bobei.shop/static/my/payway/ABC.png", // 农业银行
					BCCB: "http://www.bobei.shop/static/my/payway/BCCB.png", // 北京银行
					BOC: "http://www.bobei.shop/static/my/payway/BOC.png", // 中国银行
					BOCO: "http://www.bobei.shop/static/my/payway/BOCO.png", // 交通银行
					CCB: "http://www.bobei.shop/static/my/payway/CCB.png", // 建设银行
					CEB: "http://www.bobei.shop/static/my/payway/CEB.png", // 光大银行
					CGB: "http://www.bobei.shop/static/my/payway/CGB.png", // 广发银行
					CMBC: "http://www.bobei.shop/static/my/payway/CMBC.png", // 民生银行
					CMBCHINA: "http://www.bobei.shop/static/my/payway/CMBCHINA.png", // 招商银行
					HXB: "http://www.bobei.shop/static/my/payway/HXB.png", // 华夏银行
					ICBC: "http://www.bobei.shop/static/my/payway/ICBC.png", // 工商银行
					POST: "http://www.bobei.shop/static/my/payway/POST.png", // 邮储银行
					SPDB: "http://www.bobei.shop/static/my/payway/SPDB.png", // 浦发银安
				},
				actionsChoose: {
					name: "", // 支付方式名称
					id: "", // 支付方式id
					status: false, // 是否选中
					image: "", // 支付方式图标
					bankCardId: "", // 银行卡支付的银行卡id
					bankAbb: "", // 银行缩写大写字母
					cardNo: "", // 银行卡号
				},
				actions: [],
				actions2: [{
						name: "账户余额", // 支付方式名称
						id: "0", // 支付方式id
						status: false, // 是否选中
						image: "http://www.bobei.shop/static/my/payway/yuE.png", // 支付方式图标
						bankCardId: "", // 银行卡支付的银行卡id
						bankAbb: "", // 银行缩写大写字母
					},
					// {
					// 	name: "微信支付",
					// 	id: "1",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/weiXin.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					// {
					// 	name: "支付宝支付",
					// 	id: "2",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/zhiFuBao.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					//// 微信APP支付
					// {
					// 	name: "微信APP",
					// 	id: "11",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/weiXin.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					//// 支付宝APP支付
					// {
					// 	name: "支付宝APP",
					// 	id: "12",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/zhiFuBao.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
					// {
					// 	name: "云闪付",
					// 	id: "3",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/yuShanFu.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					// },
				],
				interval: "",
				passShow: false,
				safeword: "",
				oneClick: false,
			}
		},
		onLoad(option) {
			this.tabId = option.tabId;
			this.id = option.id;
			this.statusBarHeight = this.$mySysInfo().top;
			this.getINfo()
		},
		onShow() {
			this.getKeFu();
			this.getBankCardList();
		},
		methods: {
			deleteOrder(id) {
				this.$post({
					url: '/portal/Shop',
					module: 'Order',
					interface: 1002,
					data: {
						id: id,
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500,
					})
					setTimeout(() => {
						this.goBack()
					}, 1000)
				})
			},
			buyAgain(id) {
				console.log("再次购买", id);
				uni.navigateTo({
					url: "/home/goodsDetails?id=" + id,
				})
			},
			onKeFu() {
				uni.navigateTo({
					url: '/pages/home/webview?url=' + encodeURIComponent(this.keFu)
				})
			},
			getKeFu() {
				this.$post({
					module: "User",
					interface: "1000",
				}).then(res => {
					this.keFu = res.kefu;
				})
			},
			goGoodsDetails(id) {
				uni.navigateTo({
					url: "/home/goodsDetails?id=" + id
				})
			},
			onPassTipsSureBtn() {
				if (!this.safeword) {
					uni.showToast({
						title: "请输入支付密码密码",
						icon: "none"
					})
					return;
				}
				this.oneClick = true;
				this.$post({
						module: 'Pay',
						interface: 1000,
						data: {
							order_no: this.orederNo,
							type: '0',
							way: this.actionsChoose.id,
							cardId: this.actionsChoose.bankCardId,
							safeword: this.safeword,
						}
					}).then((res) => {
						if (this.actionsChoose.id == '0') { // 余额支付
							// this.paywayShow = false;
							this.passShow = false;
							uni.showToast({
								title: "支付成功",
								icon: "none",
								duration: 1500,
							})
							setTimeout(() => {
								this.oneClick = false;
								this.goBack()
							}, 1000)
						}
						if (this.actionsChoose.id == '2') { // 支付宝H5支付
							// #ifdef  H5
							this.passShow = false;
							setTimeout(() => {
								this.oneClick = false;
							}, 1000)
							window.location.href = res.charge;
							// #endif
							// #ifdef  APP-PLUS
							this.passShow = false;
							setTimeout(() => {
								this.oneClick = false;
							}, 1000)
							// uniapp打开浏览器
							plus.runtime.openURL(res.charge);
							// #endif
						} else if (this.actionsChoose.id == '4') { // 银行卡
							// 查询银行卡支付是否成功
							this.interval = setInterval(() => {
								this.$post({
										url: "/portal/Shop",
										module: "Order",
										interface: "1007",
										data: {
											orderNo: this.orederNo,
										},
									})
									.then((resp) => {
										if (resp.status == 1) {
											clearInterval(this.interval);
											// this.paywayShow = false;
											this.passShow = false;
											uni.showToast({
												title: "支付成功",
												icon: "none",
												duration: 1500,
											})
											setTimeout(() => {
												this.oneClick = false;
												this.goBack()
											}, 1000)
										} else if (resp.status == 0) {
											// console.log("查询支付状态中")
										} else {
											clearInterval(this.interval);
											// this.paywayShow = false;
											this.passShow = false;
											uni.showToast({
												title: "支付失败",
												icon: "none",
												duration: 1500,
											})
											setTimeout(() => {
												this.oneClick = false;
											}, 1000)
										}
									})

							}, 1500);
						}
					})
					.catch((err) => {
						// console.log("支付错误", err)
						// this.paywayShow = false;
						this.passShow = false;
						uni.showToast({
							title: "支付失败",
							icon: "none",
							duration: 1500,
						})
						setTimeout(() => {
							this.oneClick = false;
						}, 1000)
					})
			},
			onPassTipsCloseBtn() {
				this.passShow = false;
			},
			passTipsOpen(param) {
				this.passShow = param;
			},
			passTipsClose(param) {
				this.passShow = param;
			},
			pay(orederNo) {
				this.orederNo = orederNo;
				this.paywayShow = true;
			},
			onPaySure() {
				this.paywayShow = false;
				this.passShow = true;

			},
			// 银行卡列表
			getBankCardList() {
				this.$post({
					module: "Finance",
					interface: "1000",
				}).then((res) => {
					// console.log("银行卡列表", res);
					let bankCardList = [];
					res.list.forEach((item, index) => {
						bankCardList[index] = {
							name: item.cardNo,
							id: "4",
							status: false,
							image: this.bankIcon[item.bankCode] ?
								this.bankIcon[item.bankCode] : "http://www.bobei.shop/static/my/payway/yinHang.png",
							bankCardId: item.id,
							bankAbb: item.bankCode,
							cardNo: item.cardNo,
						};
					});

					this.actions = [...this.actions2, ...bankCardList]
					this.actions[0].status = true;
					this.actionsChoose = {
						name: this.actions[0].name,
						id: this.actions[0].id,
						status: this.actions[0].status,
						image: this.actions[0].image,
						bankCardId: this.actions[0].bankCardId,
						bankAbb: this.actions[0].bankAbb,
						cardNo: this.actions[0].cardNo,
					}
					// console.log("actions", this.actions);
				});
			},
			onWayItem(param) {
				this.actions.forEach((item) => {
					item.status = false;
					if (param.id == item.id) {
						item.status = true;
						this.actionsChoose = {
							name: item.name,
							id: item.id,
							status: item.status,
							image: item.image,
							bankCardId: item.bankCardId,
							bankAbb: item.bankAbb,
							cardNo: item.cardNo,
						}
					}
				})
			},
			paywayOpen(param) {
				this.paywayShow = param;
			},
			paywayClose(param) {
				this.paywayShow = param;
			},
			goMyBankCard(url) {
				this.paywayShow = false;
				uni.navigateTo({
					url: url
				})
			},
			goLogistics() {
				uni.navigateTo({
					url: `/pages/my/logistics?cn=${this.info.postCn}&postNo=${this.info.postNo}&post=${this.info.post}&orderId=${this.info.id}`
				})
			},
			getINfo() {
				this.$post({
					url: '/portal/Shop',
					module: 'Order',
					interface: '1001',
					data: {
						id: Number(this.id)
					}
				}).then(res => {
					this.info = res
				})
			},
			closeOrder(id) {
				this.$post({
					url: '/portal/Shop',
					module: 'Order',
					interface: 1004,
					data: {
						id: id,
						reason: ''
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500,
					})
					setTimeout(() => {
						this.goBack()
					}, 1000)
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},


			theGoods(id) {
				this.$post({
					url: '/portal/Shop',
					module: 'Order',
					interface: 1003,
					data: {
						id: id,
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500,
					})
					this.getINfo()
				})
			},
			goEval(id) {
				// console.log("去评价")
				uni.navigateTo({
					url: '/home/eval?id=' + id
				})
			},
			onAfterSale(param) {
				uni.navigateTo({
					url: "/afterSale/refund?id=" + this.info.id + "&goodsId=" + this.info.goodsId +
						"&orderGoodsId=" + param.id
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: 100vh;
		background-color: #F7F6FC;
		padding-bottom: 150rpx;

		.topBox {
			width: 100%;
			height: 524rpx;
			background-image: url("http://www.bobei.shop/static/third/topHeadBg.png");
			background-repeat: no-repeat;
			background-size: 100% 390rpx;
			position: relative;

			.topHead {
				background-color: transparent;
				height: 88rpx;
				width: 100%;
				padding: 0 32rpx;
				position: relative;

				.title {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					position: absolute;
					top: 22rpx;
					left: 50%;
					transform: translate(-50%, 0);
				}

				.right {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.statusBox {
				padding: 22rpx 30rpx 0 28rpx;

				.status {
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				.status2 {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 8rpx;
				}
			}

			.addressBox {
				width: 92%;
				height: 190rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				background-color: #ffffff;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 0);
				padding: 22rpx 32rpx 28rpx;

				.addStatus {
					.addSta {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: bold;
						color: #000000;
					}

					.addTime {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-left: 16rpx;
					}
				}

				.address {
					margin-top: 24rpx;

					.addressTop {
						.addressTopItem {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #131213;
						}

						.addressTopItem:nth-last-of-type(1) {
							margin-left: 20rpx;
						}
					}

					.addressBom {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #B2B2B0;
						margin-top: 8rpx;
					}
				}
			}
		}

		.infoBox {
			width: 92%;
			margin: 24rpx auto 0;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 18rpx 0 32rpx;

			.info {
				border-bottom: 1px solid rgba(0, 0, 0, 0.2);
				padding: 22rpx 16rpx 16rpx 20rpx;

				.infoTop {
					.thumb {
						width: 218rpx;
						height: 164rpx;
						border-radius: 16rpx;
					}

					.infoTopR {
						width: 458rpx;
						padding-left: 14rpx;

						.goodsTitle {
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.skuBox {
							width: 100%;
							margin-top: 14rpx;

							.sku {
								.skuText {
									font-size: 24rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #999999;
									margin-right: 20rpx;
								}

								.amount {


									.amountText {
										font-size: 24rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: 400;
										color: #999999;
									}

									.amountText2 {
										font-size: 24rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: bold;
										color: #000000;
									}
								}
							}

							.price {
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #000000;
							}
						}
					}
				}

				.btnBox {
					margin-top: 10rpx;
					justify-content: flex-end;

					.afterBtn {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #F2615F;
						width: 136rpx;
						height: 56rpx;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 2rpx solid #F2615F;
						padding: 0;
						margin: 0;
						background-color: #ffffff;
					}
				}
			}

			.finalPrice {
				margin-top: 12rpx;
				justify-content: flex-end;
				padding: 0 16rpx;

				.finalPriceText {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.finalPriceText2 {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}

		.orderInfoBox {
			margin: 24rpx auto 0;
			padding: 20rpx 22rpx 44rpx 28rpx;
			width: 92%;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.orderInfoBoxTitle {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: bold;
				color: #000000;
				padding-bottom: 8rpx;
			}

			.orderInfo {
				margin-top: 24rpx;

				.orderInfoL {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.orderInfoR {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.bom {
			width: 100%;
			height: 100rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1;

			.btn {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #F2615F;
				width: 136rpx;
				height: 56rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #F2615F;
				padding: 0;
				background-color: #ffffff;
				margin: 0 20rpx 0 0;
			}

			.btn2 {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				width: 136rpx;
				height: 56rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: none;
				padding: 0;
				margin: 0 20rpx 0 0;
				background-color: #F2615F;
			}

		}
	}

	.paywayBox {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		padding-top: 44rpx;
		position: relative;
		padding-bottom: 41rpx;

		.close {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 18rpx;
			right: 20rpx;
			z-index: 1;
		}

		.paywayTitle {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
		}

		.way {
			margin-top: 40rpx;

			.wayItem {
				padding: 0 39rpx 0 40rpx;
				height: 110rpx;
				border-top: 2rpx solid #F5F5F5;

				.wayItemLeft {
					.wayItemLeftImg {
						width: 44rpx;
						height: 44rpx;
					}

					.wayItemLeftCon {
						margin-left: 20rpx;

						.wayItemLeftConText {
							font-size: 30rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
						}

						.wayItemLeftConCard {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
						}
					}
				}

				.wayItemRight {
					.choose {
						width: 40rpx;
						height: 40rpx;
					}

					.add {
						.addText {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 37rpx;
						}

						.arrowRight {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}

			.wayItem:nth-last-of-type(1) {
				border-bottom: 2rpx solid #F5F5F5;
			}

		}

		.paySure {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 45rpx;
			width: 610rpx;
			height: 88rpx;
			background: #F2615F;
			border-radius: 16rpx;
			margin: 40rpx auto 0;
			padding: 0;
			border: none;
		}
	}

	.passTipsBox {
		width: 550rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 30rpx;

		.tipsTitle {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.tipsText {
			margin-top: 30rpx;

			.safeword {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #736464;
				line-height: 40rpx;
				width: 100%;
				height: 60rpx;
				border: 1px solid #333333;
				border-radius: 16rpx;
				padding-left: 10rpx;
			}
		}

		.tipsBtnBox {
			width: 100%;
			margin-top: 30rpx;

			button {
				padding: 0;
				margin: 0;
				width: 200rpx;
				height: 72rpx;
				border-radius: 52rpx;
				font-size: 28rpx;
			}

			.tipsCloseBtn {
				color: #F2615F;
				border: 2rpx solid #F2615F;
			}

			.tipsSureBtn {
				color: #ffffff;
				border: none;
				background: #F2615F;
			}
		}
	}
</style>